<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane label="角色管理" name="first">
            <el-row style="height: 60px">
              <el-button type="primary" size="small" icon="el-icon-plus" @click="addRole">新增角色</el-button>
            </el-row>
            <el-table :data="roles">
              <el-table-column label="序号" width="120" type="index" />
              <el-table-column label="角色名称" width="240" prop="name" />
              <el-table-column label="描述" prop="descriptioncription" />
              <el-table-column label="操作">
                <template slot-scope="{ row }">
                  <el-button type="succes" size="small" @click="asper(row.id)">分配权限</el-button>
                  <el-button type="primary" size="small" @click="editRole(row)">编辑</el-button>
                  <el-button type="danger" size="small" @click="delRole(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row type="flex" justify="center" align="middle" style="height: 60px">
              <el-pagination
                layout="prev, pager, next, sizes"
                :page-size="params.pagesize"
                :total="params.total"
                :current-page="params.page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="second">
            <el-alert type="info" title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改" show-icon :closable="false" />
            <el-form ref="form" :model="company">
              <el-form-item label="公司名称">
                <el-input v-model="company.name" style="width:400px" disabled />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="company.companyAddress" style="width:400px" disabled />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="company.mailbox" style="width:400px" disabled />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="company.remarks" type="textarea" :rows="3" disabled />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <el-dialog title="编辑部门" :visible="showDialog" @close="btnCancel">
        <el-form ref="form" :model="role" :rules="rules">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="role.name" />
          </el-form-item>
          <el-form-item label="角色名称" prop="description">
            <el-input v-model="role.description" />
          </el-form-item>
        </el-form>
        <el-row slot="footer" type="flex" justify="center">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button type="primary" size="small" @click="btnSucces">确认</el-button>
        </el-row>
      </el-dialog>
      <el-dialog title="分配权限" :visible="showPre" @close="btnC">
        <el-tree ref="permTree" :data="treeData" :props="defaultProps" default-expand-all show-checkbox check-strictly node-key="id" :default-checked-keys="defcheck" />
        <el-row slot="footer" type="flex" justify="center">
          <el-button type="primary" size="small" @click="btnO">确认</el-button>
          <el-button type="info" size="small" @click="btnC">取消</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getRoles, getCompanyById, delRole, editRole, getRoleDetail, addRole, assignPerm } from '@/api/setting'
import { getPermissionList, getPermissionDetail } from '@/api/permission'
import { mapGetters } from 'vuex'
import { transListToTree } from '@/utils/index'
export default {
  data() {
    return {
      roleId: null,
      treeData: [],
      defcheck: [],
      defaultProps: {
        label: 'name'
      },
      showPre: false,
      activeName: 'first',
      roles: [],
      company: {
        name: '',
        companyAddress: '',
        mailbox: '',
        remarks: ''
      },
      params: {
        total: 0,
        page: 1,
        pagesize: 10
      },
      showDialog: false,
      role: {
        name: '',
        description: ''
      },
      rules: {
        name: [{ required: true, trigger: 'blur', message: 'name项为必填' }],
        description: [{ required: true, trigger: 'blur', message: 'name项为必填' }]
      }
    }
  },
  computed: {
    ...mapGetters(['companyId'])
  },
  created() {
    this.getRoles()
    this.getCompanyById()
  },
  methods: {
    asper(id) {
      // console.log(1)
      this.roleId = id
      this.showPre = true
      getPermissionList().then(res => {
        this.treeData = transListToTree(res, '0')
        getPermissionDetail(id)
      }).then((ret) => {
        console.log(ret)
        this.defcheck = ret
        // console.log(0)
      })
    },
    btnC() {
      this.showPre = false
      this.defcheck = []
    },
    async btnO() {
      this.showPre = false
      await assignPerm({ permIds: this.$refs.permTree.getCheckedKeys(), id: this.roleId })
      this.$message.success('分配权限成功')
      // this.getRoles()
      this.showPre = false
    },
    tabClick(tab, event) {
      console.log(tab, event)
    },
    async getRoles() {
      const res = await getRoles(this.page)
      const { total, rows } = res
      this.params.total = total
      this.roles = rows
    },
    handleCurrentChange(currentPage) {
      this.page.page = currentPage
      this.getRoles()
    },
    handleSizeChange(size) {
      this.page.pagesize = size
      this.getRoles()
    },
    async getCompanyById() {
      const res = await getCompanyById(this.companyId)
      this.company = res
    },
    async delRole(id) {
      try {
        await this.$confirm('确认删除吗？')
        await delRole(id)
        this.$message.success('删除成功')
        this.getRoles()
      } catch (error) {
        console.log(error)
      }
    },
    btnCancel() {
      this.$refs.form.resetFields()
      this.showDialog = false
    },
    async btnSucces() {
      try {
        await this.$refs.form.validate()
        // 发请求
        if (this.role.id) {
          await editRole(this.role)
          this.$message.success('编辑成功')
        } else {
        // 新增
          await addRole(this.role)
          this.$message.success('新增成功')
        }
        this.showDialog = false
        this.getRoles()
      } catch (error) {
        console.log(error)
      }
    },
    async editRole(row) {
      this.showDialog = true
      this.role = await getRoleDetail(row.id)
    },
    async addRole() {
      this.showDialog = true
    }
  }
}
</script>

<style>

</style>
